<template>
  <div class="page">
    <div v-if="status === 0">
      <van-cell-group>
        <van-field label="倒计时(分钟)" v-model="config.time"></van-field>
        <van-field label="连算" v-model="config.count"></van-field>
        <van-field label="范围" v-model="config.len"></van-field>
        <van-field label="运算符">
          <template #input>
            <van-checkbox-group v-model="config.symbols">
              <div class="mb-5">
                <van-checkbox shape="square" name="+">加法</van-checkbox>
              </div>
              <div class="mb-5">
                <van-checkbox shape="square" name="-">减法</van-checkbox>
              </div>
              <!-- <div class="mb-5">
                <van-checkbox shape="square" name="chen">乘法</van-checkbox>
              </div>
              <div class="mb-5">
                <van-checkbox shape="square" name="chu">除法</van-checkbox>
              </div> -->
            </van-checkbox-group>
          </template>
        </van-field>
      </van-cell-group>
      <div class="mt-20">
        <van-button type="info" size="medium" block round @click="doStart">开 始</van-button>
      </div>
    </div>
    <div class="zuoti" v-if="status === 1">
      <div class="zuoti-timer">
        <van-count-down :time="timer" auto-start ref="countDown" @finish="doFinish" />
      </div>
      <div class="zuoti-main">
        <van-swipe ref="swipe" class="my-swipe" :initial-swipe="model.current - 1" :show-indicators="false" :loop="false" :touchable="false">
          <template v-for="item in model.rows">
            <van-swipe-item :key="item.uuid">
              <div class="zuoti-item">
                <div class="t-16 mb-20 t-gray">第 {{ model.current + 1 }} 题</div>
                <div>
                  <span class="zuoti-timu">{{ item.text }}</span> <span class="zuoti-daan">{{ model.answer[model.current] || "?" }}</span>
                </div>
              </div>
            </van-swipe-item>
          </template>
        </van-swipe>
      </div>
      <div>
        <van-number-keyboard v-model="model.answer[model.current]" close-button-text="完成" @close="doNext" show theme="custom" extra-key="." />
      </div>
    </div>
    <template v-if="status === 2">
      <div class="zuoti-jieguo">
        <div class="mb-10 t-16 t-center">做题结束</div>
        <div class="mb-20 t-16 t-center">
          <span>共计: {{ model.rows.length }}</span>
          <span class="is-right ml-20 mr-20">正确:{{ model.right || 0 }}</span>
          <span class="is-error">错误:{{ model.error || 0 }}</span>
        </div>
        <div class="mb-10">
          <van-row>
            <template v-for="(item, index) in model.rows">
              <van-col :key="item.uuid" :span="12">
                <div class="zuoti-jieguo-item" :class="item.answer == model.answer[index] ? 'is-right' : 'is-error'">
                  {{ item.text }}{{ model.answer[index] }}
                </div>
              </van-col>
            </template>
          </van-row>
        </div>
        <div>
          <van-button @click="doInit" round type="info" block>返 回</van-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { uuid } from "@/utils";
export default {
  data() {
    return {
      model: {
        rows: [],
        answer: {},
        current: 0,
        error: 0,
        right: 0,
      },
      timer: 0,
      config: {
        time: 5,
        len: 20, // 范围
        count: 2, // 连算
        symbols: ["+", "-"],
      },
      status: 0, // 0 初始化 1 进行中 2 结束
    };
  },
  methods: {
    doInit() {
      this.status = 0;
      this.model.rows = [];
      this.model.answer = {};
    },
    doStart() {
      this.model.rows = [];
      this.model.answer = {};

      this.timer = this.config.time * 60 * 1000;
      this.model.rows.push(createItem(this.config));
      this.model.current = 0;
      this.status = 1;
    },
    doNext() {
      this.model.current += 1;
      this.model.rows.push(createItem(this.config));
      this.$nextTick(() => {
        this.$refs.swipe.swipeTo(this.model.current);
      });
      // console.log(this.model.answer, this.model.current);
    },
    doFinish() {
      if (!this.model.answer[this.model.current]) {
        this.model.rows.splice(-1);
      }

      const result = this.model.rows.reduce((total, item, index) => {
        // console.log(total);
        // total = total ||
        if (item.answer == this.model.answer[index]) {
          total.right = (total.right || 0) + 1;
        } else {
          total.error = (total.error || 0) + 1;
        }
        return total;
      }, {});

      this.model.error = result.error;
      this.model.right = result.right;

      this.status = 2;
    },
    // onChange() {

    // },
  },
  created() {
    // createItem(this.config);
  },
};

function createItem({ len, count, symbols }) {
  // console.log(count, "count");
  const _count = new Array(+count).fill("");
  // console.log(_count, "生成数量");
  let sz = _count.map(() => createRandonNumber(0, len));

  // const sybls = _count.slice(0, -1).map(() => chooseSymbol(symbols));
  sz = sz.sort((a, b) => b - a);

  let ti = sz.map((item) => {
    const sybl = chooseSymbol(symbols);
    return [item, sybl];
  });

  ti = ti.flat().slice(0, -1);
  let ti_gongshi = ti.join("");

  let answer = window.eval(ti_gongshi);

  if (answer < 0 || answer > len) {
    return createItem({ len, count, symbols });
  }

  return {
    uuid: uuid(),
    text: `${ti_gongshi}=`,
    answer: `${answer}`,
  };
}
function createRandonNumber(start, end) {
  var num = Math.floor(Math.random() * (end - start + 1) + start);
  return num;
}
function chooseSymbol(symbols) {
  const str = symbols[Math.floor(Math.random() * symbols.length)];
  return str;
}
</script>

<style lang="less" scoped>
.page {
  padding: 10px;
}

.zuoti {
  // padding: 20px 0;
  .zuoti-timer {
    text-align: center;
  }
  .van-count-down {
    font-size: 30px;
    height: 50px;
    line-height: 50px;
  }
  .zuoti-main {
    height: 50vh;
  }

  .my-swipe {
    height: 100%;
  }
  .zuoti-item {
    background: #fff;
    height: 100%;
    border-radius: 5px;
    font-size: 40px;
    text-align: center;
    padding: 20px 0;
  }
  .zuoti-timu {
    letter-spacing: 10px;
  }
  .zuoti-huida {
    // letter-spacing: 10px;
  }
}

.zuoti-jieguo {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  .zuoti-jieguo-item {
    line-height: 2;
    letter-spacing: 5px;
    text-align: center;
  }

  .is-right {
    color: #02b340;
  }

  .is-error {
    color: #f52443;
  }
}
</style>
